<template>
  <!-- 新增弹窗 -->
  <el-dialog
    :title="id ? (type ? '查看用户' : '编辑用户') : title"
    :visible="dialogVisible"
    width="30%"
    @close="close"
  >
    <!-- 表单 -->
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <!-- 图片上传 -->
      <el-form-item label="图片上传">
        <ImgUpload ref="imgUploadPhoto" />
      </el-form-item>
      <!-- end -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" />
      </el-form-item>
    </el-form>
    <!-- end -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { UserRegister } from '@/api/user'
import {
  getStaffById,
  editStaff,
  getStaffCount,
  getStaffList
} from '@/api/staff'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const emailValidate = (rule, value, callback) => {
      const regEmail =
        /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
      if (regEmail.test(value)) {
        callback()
      } else {
        callback(new Error('邮箱格式不正确'))
      }
    }
    return {
      title: '添加用户',
      id: '',
      type: '',
      ruleForm: { username: '', email: '', password: '', image: '' },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: emailValidate, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: '长度在 6 到 10 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 提交
    async submit() {
      if (this.id) {
        this.ruleForm.image = this.$refs.imgUploadPhoto.fileList[0].url
        this.$refs.imgUploadPhoto.percent = 100
        const res = await editStaff({ ...this.ruleForm, id: this.id })
        this.$message.success('编辑成功', res.statusText)
        this.close()
      } else {
        await this.$refs.ruleForm.validate()
        try {
          this.ruleForm.image = this.$refs.imgUploadPhoto.fileList[0].url
          const res = await UserRegister(this.ruleForm)
          this.$message.success('注册成功', res.statusText)
          this.close()
        } catch (error) {
          this.$message.error(error.message)
        }
      }
    },
    // 数据回显
    async backFill() {
      const { data } = await getStaffById(this.id)
      this.ruleForm = data
      this.$refs.imgUploadPhoto.fileList = [{ url: '' }]
      this.$refs.imgUploadPhoto.fileList[0].url = this.ruleForm.image
      this.$refs.imgUploadPhoto.percentage = 100
    },
    // 关闭
    async close() {
      const { data } = await getStaffCount()
      // 判断是否是添加
      if (!this.id) {
        // 判断是否要加一页
        if (data % this.$parent.limit > 0) {
          const start = parseInt(data / this.$parent.limit) + 1
          this.$parent.getCount(start)
          this.$parent.closeUpdate(start)
        } else {
          const start = data / this.$parent.limit
          this.$parent.closeUpdate(start)
          this.$parent.getCount()
        }
      } else if (this.id) {
        // 这是编辑
        const { data } = await getStaffList({
          _limit: this.$parent.limit,
          _start: this.$parent.start
        })
        this.$parent.tableData = data
        // this.$parent.closeUpdate(start);
        // this.$parent.getStaffList();
        // let start = data / this.$parent.limit;
        // this.$parent.closeUpdate(start);
      }
      // const start = this.$parent.start / this.$parent.limit + 1;
      // this.$parent.closeUpdate(start);
      this.ruleForm = {}
      this.$refs.imgUploadPhoto.fileList = []
      this.$refs.ruleForm.resetFields()
      this.type = ''
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style>
</style>
